<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="initial-scale=1.0, user-scalable=no" name="viewport"/>
    <title></title>
<!--    <script src="https://webapi.amap.com/maps?v=2.0&key=d17ca8bb30359e54357f2754e26376a3"></script>-->
    <style>
        html,
        body,
        #container {
           margin:0;
           padding:0;
           width: 100%;
           height: 100%;
        }

        .custom-content-marker {
  position: relative;
  width: 25px;
  height: 34px;
}

.custom-content-marker img {
  width: 100%;
  height: 100%;
}

.custom-content-marker .close-btn {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  background: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 15px;
  box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
}

.custom-content-marker .close-btn:hover{
  background: #666;
}

<!--        #container {-->
<!--            width: 300px;-->
<!--            height: 180px;-->
<!--        }-->
    </style>
</head>
<body>
<div id="container">

</div>
</body>
</html>
<!--<script src="https://webapi.amap.com/loader.js"></script>-->
<script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "b3a1542ab80e55d0f695c09eded917cc",
    };
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=33da4cf36eafdb47ecd638f581ef356d"></script>
<script type="text/javascript">

<!--    const AMap = await AMapLoader.load({-->
<!--      key: "d17ca8bb30359e54357f2754e26376a3", //申请好的Web端开发者key，调用 load 时必填-->
<!--      version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15-->
<!--    })-->
    //JS API 加载完成后获取AMap对象
    const map = new AMap.Map("container", {
       viewMode: '2D', //默认使用 2D 模式
       zoom: 11, //地图级别
        center: [116.397428, 39.90923], //地图中心点
    });

     //点标记显示内容
    const markerContent = `<div class="custom-content-marker">
    <img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png">
    <div class="close-btn" onclick="clearMarker()">X</div>
    </div>`

    function setLocation(longitude,latitude){
        map.setZoomAndCenter(18,[longitude,latitude]);
        const position = new AMap.LngLat(longitude, latitude); //Marker 经纬度
        const marker = new AMap.Marker({
            map:map,
            position: position,
            content: markerContent, //将 html 传给 content
        });
        map.add(marker);

        map.plugin(['AMap.PlaceSearch'], function() {
           var PlaceSearchOptions = { //设置PlaceSearch属性
               map:map,//在地图中显示对应的标记
               pageSize: 4, //每页结果数,默认10
               pageIndex: 1, //请求页码，默认1
               extensions: "base" //返回信息详略，默认为base（基本信息）
           };
           var MSearch = new AMap.PlaceSearch(PlaceSearchOptions); //构造PlaceSearch类
           AMap.Event.addListener(MSearch, "complete",(result)=>{
                 console.info(JSON.stringify(result.poiList.pois))
                 //调用鸿蒙端的方法，现在最近的几个地址
                 //window.swift.alert(JSON.stringify(result.poiList.pois))
                 window.swift.receiveNearPlace(JSON.stringify(result.poiList.pois))
           }); //返回结果
           MSearch.searchNearBy("停车场", [longitude, latitude]); //关键字查询
        });

<!--          AMap.plugin(["AMap.PlaceSearch"], function () {-->
<!--              const placeSearch = new AMap.PlaceSearch({-->
<!--                pageSize: 4, //单页显示结果条数-->
<!--                pageIndex: 1, //页码-->
<!--                map: map, //展现结果的地图实例-->
<!--                extensions:"base"-->
<!--              });-->
<!--              AMap.Event.addListener(placeSearch,"complete",(result)=>{-->

<!--              });-->
<!--              placeSearch.searchNearBy("停车场",[longitude,latitude]); //使用插件搜索关键字并查看结果-->
<!--        });-->
    }

    window.onload=function(){
        //调用鸿蒙端的业务方法
        window.swift.setCurrentLocation();
    }

</script>